<!DOCTYPE html>
<html lang="en">
<head>

    <%include head.ejs%>
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="/assets/css/to-do.css">
</head>

<body>

<section id="container" >
    <!-- **********************************************************************************************************************************************************
    TOP BAR CONTENT & NOTIFICATIONS
    *********************************************************************************************************************************************************** -->
    <!--header start-->
    <%include header.ejs%>
    <!--header end-->

    <!-- **********************************************************************************************************************************************************
    MAIN SIDEBAR MENU
    *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <%include sidebar.ejs%>
    <!--sidebar end-->

    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <h3><i class="fa fa-angle-right"></i> 相关产品</h3>

            <div class="row mt mb">
                <div class="col-md-12">
                    <section class="task-panel tasks-widget">
                        <div class="panel-heading">
                            <div class="pull-left"><h5><i class="fa fa-tasks"></i> 相关产品 - 产品管理</h5></div>
                            <br>
                        </div>
                        <div class="panel-body">
                            <div class="task-content">
                                <ul id="sortable" class="task-list product-list">

                                </ul>
                            </div>
                            <nav>
                                <ul id="pager" class="pager">
                                    <li><a id="prevpage" href="javascript:void(0);">上一页</a></li>
                                    <li><a id="nextpage" href="javascript:void(0);">下一页</a></li>
                                </ul>
                            </nav>
                            <div class=" add-task-row">
                                <a class="btn btn-success btn-sm pull-left" href="/admin/products/editpage">添加产品</a>
                                <a id="btn-delete-choose" class="btn btn-default btn-sm pull-left" href="#">删除所选</a>
                            </div>
                        </div>
                    </section>
                </div><!--/col-md-12 -->
            </div><!-- /row -->

        </section><! --/wrapper -->
    </section><!-- /MAIN CONTENT -->

    <!--main content end-->
    <!--footer start-->
    <% include site-footer.ejs%>
    <!--footer end-->
</section>

<!--确认删除-->
<div id="deleteConfirm" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">操作确认</h4>
            </div>
            <div class="modal-body">
                <p>确认删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn-delete-confirm" class="btn btn-primary">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%include basejs.ejs%>

<!--script for this page-->
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/js/model/Product.js"></script>

<script>

    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });

</script>


<script>
    //custom select box

    $(function(){
        var page = {
            pageNumber: 1,
            perNumber: 10,
            keyword: ''
        };

        showLoading('#sortable', 'win8_linear');
        Product.list(page, getListSuccess, getListError);

        function getListError() {
            return $('#sortable').waitMe('hide');
        }

        function getListSuccess(returnpage) {

            $('#sortable').waitMe('hide');
            var list = returnpage.list;

            page.pageNumber = returnpage.pageNumber;

            //修改上下页
            if (returnpage.prevpage) {
                $('#prevpage').attr('title', returnpage.prevpage);
                $('#prevpage').parent().removeClass('disabled');
            } else {
                $('#prevpage').parent().addClass('disabled');
            }

            if (returnpage.nextpage) {
                $('#nextpage').attr('title', returnpage.nextpage);
                $('#nextpage').parent().removeClass('disabled');
            } else {
                $('#nextpage').parent().addClass('disabled');
            }

            var itemHtml = '';
            if (list.length) {
                list.forEach(function (product) {

                    itemHtml += '<li> '
                            + '<i class=" fa fa-ellipsis-v"></i> '
                            + '<div class="task-checkbox"> '
                            + '<input type="checkbox" class="list-child" value="'+ product._id +'"  /> '
                            + '</div> '
                            + '<div class="task-title"> '
                            + '<span class="task-title-sp">'+ product.name +'</span> '
                            + '<span class="badge">'+ product.category +'</span> '
                            + '<div class="pull-right hidden-phone"> '
                            + '<a href="/admin/products/editpage/'+ product._id +'" title="编辑" class="btn btn-primary btn-xs fa fa-pencil"></a> '
                            + '<a _id="'+ product._id +'" title="删除" class="btn btn-danger btn-xs fa fa-trash-o"></a> '
                            + '</div> '
                            + '</div> '
                            + '</li> ';
                });
            }
            return $('#sortable').html(itemHtml);
        }


        $('#sortable').on('change', 'input.list-child', function() {
            if ($(this).is(':checked')) {
                $(this).parents('li').addClass("task-done");
            } else {
                $(this).parents('li').removeClass("task-done");
            }
        });

        $('#prevpage, #nextpage').on('click', function () {
            var title = $(this).attr('title');
            if (title) {
                page.pageNumber = title;
                Product.list(page, getListSuccess, getListError);
            }
        });

        var idList = [];

        //有_id的删除标签
        $('#sortable').on('click', 'a[_id]', function () {
            var _id = $(this).attr('_id');
            idList = [_id];
            $('#deleteConfirm').modal('show');
        });

        //删除选中
        $('#btn-delete-choose').on('click', function () {
            idList = [];
            $('#sortable input.list-child:checked').each(function () {
                idList.push($(this).attr('value'));
            });
            if (!idList.length) {
                alert('无勾选应用');
                return false;
            }
            $('#deleteConfirm').modal('show');
        });

        //确认删除
        $('#deleteConfirm').on('click', '#btn-delete-confirm', function () {
            $('#deleteConfirm').modal('hide');
            Product.delete(idList, deleteSuccess, deleteError);
        });


        function deleteSuccess(data) {
           alert('删除成功');
           Product.list(page, getListSuccess, getListError);
        }

        function deleteError() {
            alert('删除失败');
        }
    });

</script>

</body>
</html>
